<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{user}}</h2>
      <button @click="attrOperation">新增属性、删除属性，界面不会更新</button>
      <hr />
      <h2>{{array}}</h2>
      <button @click="arrayOperation">
        直接通过下标修改数组，界面不会自动更新。
      </button>
    </div>
    <script src="./js/vue2.js"></script>
    <script>
      //新增属性、删除属性，界面不会更新。
      //直接通过下标修改数组，界面不会自动更新。
      var app = new Vue({
        el: "#app",
        data: function () {
          return {
            user: { name: "tom", age: 19, address: { city: "zhuhai" } },
            array: [1, 2, 3],
          };
        },
        methods: {
          attrOperation() {
            //添加一个新属性
            this.user.address.province = "中国";
            //删除属性
            delete this.user.address.city;
            console.log(JSON.stringify(this.user));
          },
          arrayOperation() {
            this.array[0] = 100;
            console.log(this.array);
          },
        },
      });
    </script>
  </body>
</html>
